<template>
  <div class="mergs-detail-over-container">
    <!-- 整体明细 -->
    <el-card class="box-card" shadow="never">
      <el-form :inline="true" label-position="right"  label-width="90px" :model="orderOptions" size="small" ref='time' class="time-form">
        <el-form-item label="接班时间：" style="width:30%">
          <el-date-picker v-model="changeoverTime" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" placeholder="接班时间" disabled></el-date-picker>
        </el-form-item>
        <el-form-item label="交班时间：" style="width:30%">
          <el-date-picker v-model="shiftTime" type="datetime" align="right" value-format="yyyy-MM-dd HH:mm:ss" placeholder="交班时间" disabled>
          </el-date-picker>
        </el-form-item>
        <div style="display:inline-flex;height:100%;width:37%;justify-content:flex-end">
          <el-button @click="exportDutyByDutyIdApi" class="btn-pri-type" type="primary" size="small">下载本班次整体交易明细</el-button>
        </div> 
      </el-form>
    </el-card>
    <!-- 汇总 -->
    <div class="sum-title">
      <div class="sum-color"></div>
      <div class="sum-text">本班次流水汇总</div>
    </div>
    <div class="box-card-title">
      <div class="title-bottom">本班次时间：{{changeoverTime}}  ~   {{shiftTime}}</div>
    </div>
    <!--没有pos收单展示样式-->
    <handoverDetailNoPosTab v-if="!showPos" :czbGasDutyRecord="czbGasDutyRecord" :isShowSum="isShowSum"></handoverDetailNoPosTab>
    <!--有pos展示样式-->
    <handoverPosTab v-else :czbGasDutyRecord="czbGasDutyRecord" :appCzbGasDuty="appCzbGasDuty" :posCzbGasDuty="posCzbGasDuty" :isShowSum="isShowSum" :isShowReal="isShowReal"></handoverPosTab>
    <!-- 油号交易汇总 -->
    <div class="oilNum-wrapper">
      <div class="oilNum-title">
        <div class="wrap">
          <div class="title-color"></div>
          <div class="title-text">油号交易汇总</div>
        </div>
        <el-button @click="exportOilDutyByDutyIdApi" class="down-btn btn-pri-type" type="primary" size="small" style="margin-right: 35px">下载本班次油号交易汇总</el-button>
      </div>
      <el-table v-loading="isLoading"  size="small" :data="oilNumSummary" highlight-current-row border style="width: 100%">
        <template v-if="!showPos">
          <el-table-column v-for="(item, index) in column1" :key="index" :prop="item.dataIndex"  :label="item.title" :align="item.align"></el-table-column>
        </template>
        <template v-else>
          <el-table-column v-for="(item, index) in column1" :key="index" :prop="item.dataIndex"  :label="item.title" :align="item.align">
            <template slot-scope="scope">
              <div v-if="item.dataIndex === 'oilNum'">{{scope.row.oilNum}}</div>
              <!--加油金额部分-->
              <div v-if="item.dataIndex === 'amount'">
                <div class="amount_merge">汇总：{{scope.row.amount || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.amount || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.amount || 0}}</div>
              </div>
              <!--升数部分-->
              <div v-if="item.dataIndex === 'litre'">
                <div class="amount_merge">汇总：{{scope.row.litre || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.litre || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.litre || 0}}</div>
              </div>
              <!--订单部分-->
              <div v-if="item.dataIndex === 'count'">
                <div class="amount_merge">汇总：{{scope.row.count || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.count || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.count || 0}}</div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
    <!-- 枪号交易汇总 -->
    <div class="gunNum-wrapper">
      <div class="gunNum-title">
        <div class="wrap">
          <div class="title-color"></div>
          <div class="title-text">枪号交易汇总</div>
        </div>
        <el-button @click="exportGunDutyByDutyIdApi"  type="primary btn-pri-type" class="down-btn" size="small" style="margin-right: 35px">下载本班次油枪交易汇总</el-button>
      </div>
      <el-table v-loading="isLoading" size="small" :data="gunNumSummary" highlight-current-row border style="width: 100%">
        <template v-if="!showPos">
          <el-table-column v-for="(item, index) in column2" :key="index" :prop="item.dataIndex"  :label="item.title" :align="item.align"></el-table-column>
        </template>
        <template v-else>
          <el-table-column v-for="(item, index) in column2" :key="index" :prop="item.dataIndex"  :label="item.title" :align="item.align">
            <template slot-scope="scope">
              <div v-if="item.dataIndex === 'gunNo'">{{scope.row.gunNo || 0}}</div>
              <div v-if="item.dataIndex === 'oilNum'">{{scope.row.oilNum || 0}}</div>
              <!--加油金额部分-->
              <div v-if="item.dataIndex === 'amount'">
                <div class="amount_merge">汇总：{{scope.row.amount || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.amount || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.amount || 0}}</div>
              </div>
              <!--升数部分-->
              <div v-if="item.dataIndex === 'litre'">
                <div class="amount_merge">汇总：{{scope.row.litre || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.litre || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.litre || 0}}</div>
              </div>
              <!--订单部分-->
              <div v-if="item.dataIndex === 'count'">
                <div class="amount_merge">汇总：{{scope.row.count || 0}}</div>
                <div class="amount_merge">团油收单：{{scope.row.appDutyGunNumSum.count || 0}}</div>
                <div>POS收单：{{scope.row.posDutyGunNumSum.count || 0}}</div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getHandoverDetail, exportDutyByDutyId, exportOilDutyByDutyId, exportGunDutyByDutyId } from '@/api/handover'
// import { outputFile } from '@/utils/utils'
import handoverPosTab from './components/handoverPosTab'
import handoverDetailNoPosTab from './components/handoverDetailNoPosTab'
import { exportSearchList } from '@/utils/listTools'
// import moment from 'moment'
import mixin from './mixins'
const column1 = [
  { title: '油号', dataIndex: 'oilNum', align: 'center' },
  { title: '加油金额', dataIndex: 'amount', align: 'center' },
  { title: '升数（升）', dataIndex: 'litre', align: 'center' },
  { title: '订单数', dataIndex: 'count', align: 'center' }
]
const column2 = [
  { title: '油枪号', dataIndex: 'gunNo', align: 'center' },
  { title: '油号', dataIndex: 'oilNum', align: 'center' },
  { title: '加油金额（元）', dataIndex: 'amount', align: 'center' },
  { title: '升数（升）', dataIndex: 'litre', align: 'center' },
  { title: '订单数', dataIndex: 'count', align: 'center' }
]
export default {
  // name: 'handoverDetail',
  mixins: [mixin],
  components: {
    handoverPosTab,
    handoverDetailNoPosTab
  },
  data () {
    return {
      showPos: false, // 是否有pos收单
      isShowSum: false, // 是否展示汇总
      column1,
      column2,
      // noVal: ['', null, undefined],
      isLoading: false,
      id: '', // 主键id
      orderOptions: {},
      changeoverTime: '', // 接班时间通过接口获取 不能修改 
      shiftTime: '', // 交班时间
      czbGasDutyRecord: {}, // 本次交易汇总
      appCzbGasDuty: {}, // 团油交易汇总
      posCzbGasDuty: {}, // POS交易汇总
      oilNumSummary: [], // 油号交易列表
      gunNumSummary: [], // 枪号交易列表
      oilNumSummaryData: [], // 油号导出数据
      gunNumSummaryData: [] // 枪号导出数据
    }
  },
  mounted () {
    this.dutyId = this.$route.query.id
    this.takeHandover()
  },
  methods: {
    async takeHandover () { // 交接班操作(获取交接班信息)
      this.isLoading = true
      try {
        const { code, result } = await getHandoverDetail({ dutyId: this.dutyId })
        if (code !== 200) return
        const { czbGasDutyRecord = {}, appCzbGasDuty = {}, posCzbGasDuty = {}, gunNumSumList = [],oilNumSumList = [], isShowSum, showPos } = result
        const { dutyStartTime, dutyEndTime } = czbGasDutyRecord
        czbGasDutyRecord.period = `${dutyStartTime} ~ ${dutyEndTime}`
        this.changeoverTime = dutyStartTime
        this.shiftTime = dutyEndTime
        this.oilNumSummary = oilNumSumList
        this.gunNumSummary = gunNumSumList
        // this.setDataAll(czbGasDutyRecord) // 将油站汇总信息放入汇总信息中
        this.showPos = showPos // 是否展示pos收单
        this.czbGasDutyRecord = czbGasDutyRecord // 汇总信息
        this.appCzbGasDuty = appCzbGasDuty // 团油收单汇总
        this.posCzbGasDuty = posCzbGasDuty // POS收单汇总
        this.isShowSum = isShowSum // 实付金额是否展示
      } catch (error) {
        console.log(error.message)
      } finally {
        this.isLoading = false
      }
    },
    // 导出整体交易明细
    async exportDutyByDutyIdApi () {
      try {
        const { code, result = {} }= await exportDutyByDutyId({ dutyId: this.dutyId })
        if (code !== 200) return
        exportSearchList(result.file, result.fileName)
      } catch (error) {
        console.log(error.message)
      }
    },
    // 导出油号交易明细
    async exportOilDutyByDutyIdApi () {
      try {
        const { code, result = {} }= await exportOilDutyByDutyId({ dutyId: this.dutyId })
        if (code !== 200) return
        exportSearchList(result.file, result.fileName)
      } catch (error) {
        console.log(error.message)
      }
    },
    // 导出枪号交易明细
    async exportGunDutyByDutyIdApi () {
      try {
        const { code, result = {} }= await exportGunDutyByDutyId({ dutyId: this.dutyId})
        if (code !== 200) return
        exportSearchList(result.file, result.fileName)
      } catch (error) {
        console.log(error.message)
      }
    }
  }
}
</script>

<style lang="less">
  .mergs-detail-over-container{
    min-width: 80%;
    min-height: 700px;
    padding: 40px 10px;
    box-sizing: border-box;
    background-color: #F8F9FD;
      .time-form{
        margin-top: 20px;
        width: 100%;
        box-sizing: border-box;
      }
    .true-btn{
      transform: translateX(-50%);
    }
    .box-card-title{
      background: #fff;
      width: 100%;
      padding: 11px 0 11px 30px;
      border-radius: 1px;
      box-sizing: border-box;
      margin-bottom: 10px;
      .title-bottom{
        color: #222222;
        font-size: 14px;
      }
    }

    .box-card-content{
    display: flex;
    .sumAll{
      flex: 1;
      height: 179px;
      padding: 22px 0 0 30px;
      box-sizing: border-box;
      margin-right: 10px;
      border-radius: 1px;
      background: #fff;
      &:last-child{
        margin-right: 0;
        border-right: none;
      }
      .box-card-item{
        width: 100%;
        height: 100%;
        .title{
          font-size:13px;
          font-family:PingFangSC-Bold,PingFang SC;
          font-weight:bold;
          color:rgba(34,34,34,1);
          margin-bottom: 7px;
        }
        .card-item-text{
          font-size:13px;
          font-family:PingFangSC-Regular,PingFang SC;
          font-weight:400;
          color:rgba(122,122,122,1);
          line-height:24px;
        }
      }
    }
  }

  .oilNum-wrapper{
    .oilNum-title{
      width: 100%;
      height: 62px;
      display: flex;
      align-items: center;
      padding-left: 30px;
      justify-content: space-between;
      .wrap{
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        .title-color{
          width: 4px;
          height: 14px;
          background-color: #4B7EFE;
          margin-right: 6px;
        }
        .title-text{
          font-size:16px;
          font-family:PingFangSC-Bold,PingFang SC;
          font-weight:bold;
          color:rgba(34,34,34,1);
        }
      }
    }
    .amount_merge{
      border-bottom: 1px solid #EAEEF4;
    }
  }
  .gunNum-wrapper{
      .gunNum-title{
        width: 100%;
        height: 62px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;
        .wrap{
          display: flex;
          width: 100%;
          height: 100%;
          align-items: center;
          .title-color{
            width: 4px;
            height: 14px;
            background-color: #4B7EFE;
            margin-right: 6px;
          }
          .title-text{
            font-size:16px;
            font-family:PingFangSC-Bold,PingFang SC;
            font-weight:bold;
            color:rgba(34,34,34,1);
          }
        }
      }
    }

  .btn-pri-type{
    background: #4B7EFE; 
    border: none;
  }
  .pop-container{
    .pop-des{
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #383838;
      line-height: 25px;
    }
  }
  }


  .sum-title{
  width: 100%;
  height: 62px;
  display: flex;
  align-items: center;
  padding-left: 30px;
  box-sizing: border-box;
  .sum-color{
    width: 4px;
    height: 14px;
    background-color: #4B7EFE;
    margin-right: 6px;
  }
  .sum-text{
    font-size:16px;
    font-family:PingFangSC-Bold,PingFang SC;
    font-weight:bold;
    color:rgba(34,34,34,1);
  }
}
.mergs-detail1-set-pop{
  padding: 14px!important;
  left: 1078px!important;
}
.mergs-detail1-sum-pop{
  padding: 14px!important;
  left: 310px!important;
}
.mergs-detail-pop-title{
  cursor: pointer;
  color: #4B7EFE;
}


</style>
